<template>
    <div>
      <x-header title="订单详情" style="background-color: #33bb99;width:100%;position: fixed;top:0;z-index: 99;">
        <span slot="overwrite-left" @click="back" class="iconfont icon-shangyiyedanjiantou" style="color: #fff;font-size: 22px;"></span>
      </x-header>
      <flexbox orient="vertical" style="width: 95%;margin: 50px auto 0;z-index: 10">
        <flexbox-item><div class="flex-demo">
          <div class="title">
            <span>采购商：{{detail.purchasersCompanyName}}</span>
            <span class="time">{{detail.create_time}}</span>
            <!--<span class="log-btn" @click="viewOrderRecord">查看订单操作记录</span>-->
          </div>
          <div class="order-text">
            <h5>订单号：{{detail.order_no}}</h5>
            <div class="order-state">
              <span style="margin-right: 1rem;"><i class="iconfont icon-dingdan"></i>{{detail.order_status | statusFilter}}</span>
              <span><i class="iconfont icon-dingdandaifukuan"></i>{{detail.order_pay_status==0?'未付款':'已付款'}}</span>
            </div>
            <p v-if="isAddress" class="update-address">
              <!--v-if="isAddress"-->
              <i class="iconfont icon-dizhi1"></i>
              <span>{{detail.prov}} {{detail.city}} {{detail.area}} {{detail.detail_address}}</span>
              <i class="iconfont icon-bianji" style="color:#10AEFF;padding-left:1rem;" @click="editAddress"></i>
            </p>
            <p :style="{color:detail.remark?'#333':'#ccc'}">
              <i class="iconfont icon-beizhu"></i>
              <span>{{detail.remark?detail.remark:'（暂无备注信息）'}}</span>
            </p>
            <div class="pay">
              <span class="price"><i class="iconfont icon-zhifufangshi"></i>￥<span>{{(detail.order_total*1*1).toFixed(2)}}</span></span>
            </div>
          </div>
          <div class="event-btn">
            <span class="confirm" v-if="detail.order_status==0" style="background: #ffc655" @click="disconfirmOrder">拒绝接单</span>
            <span class="confirm" v-if="detail.order_status==0" @click="confirmOrder">确认订单</span>
            <span class="confirm" v-if="detail.order_status==1" style="background: #10AEFF" @click="shipmentsOrder">发货</span>
            <span class="confirm" v-if="detail.order_status==4" @click="isShowReturn = true,type=0" style="background: #10AEFF">处理退货</span>
            <span class="confirm" v-if="detail.order_status==6" @click="isShowReturn = true,type=1" style="background: #ffc655">处理取消交易</span>
            <span class="confirm" v-if="detail.order_pay_status==0" @click="payState = true,money=(detail.order_total*1*1).toFixed(2)">支付</span>
          </div>
        </div></flexbox-item>
        <flexbox-item><div class="flex-demo goodsList" v-for="v in order" v-if="show">
          <div class="goodsItem">
            <div class="title">
              <span><i class="fa fa-thumb-tack" style="color: #33bb99;margin-right: 1rem;"></i>{{v.goods_name}}</span>
              <span class="title-btn" @click="editDetail(v)">修改订单</span>
            </div>
            <div class="title">
              <x-table :cell-bordered="false"  :content-bordered="false" style="background-color:#fff;">
                <thead>
                <tr style="background-color: #F7F7F7">
                  <th>规格</th>
                  <th>价格</th>
                  <th>单位</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>{{v.norm.norm}}</td>
                  <td>{{v.norm.price}}</td>
                  <td>{{v.norm.unit}}</td>
                </tr>
                </tbody>
              </x-table>
            </div>
            <div class="order-text">
              <div class="text"><span>单价</span><span>￥ {{v.price}}</span></div>
              <div class="text"><span>数量</span><span>{{v.num}}</span></div>
              <div class="text all"><span>备注</span><span>{{v.remark||''}}</span></div>
              <div class="text" style="border-bottom: 0;font-weight: 600;"><span>小计</span><span style="color: #ff0000">￥ {{v.total}}</span></div>
            </div>
          </div>
        </div></flexbox-item>
        <div class="signature-img" v-if="isShow" v-show="detail.is_sign=='0'">
          <div style="border-bottom: 1px solid #f1f1f1;line-height:30px;text-align: left;padding-left:0.5rem;font-size: 0.8rem;">客户签字</div>
          <img :src="detail.sign_img">
        </div>
        <router-link :to="{path:'/project0/view1/signature', query:{uid:detail.id}}" class="signature" >客户签字</router-link>
      </flexbox>
      <!--修改订单详情-->
      <div v-transfer-dom>
        <popup v-model="isShowUpdate" style="background: #fff;border-top:1px #f1f1f1 solid;">
          <detailUpdate v-if="isShowUpdate" :goodsDetail="goodsDetail" :orderId="orderId" @toDetail="back3"></detailUpdate>
        </popup>
      </div>
      <!--修改收货地址-->
      <div v-transfer-dom>
        <popup v-model="showAddress" height="100%" style="background: #fff;border-top:1px #f1f1f1 solid;">
          <detailAddress v-if="showAddress" :orderDetail="orderDetail" @toDetail="back3"></detailAddress>
        </popup>
      </div>
      <!--处理退货 / 处理取消交易请求-->
      <div v-transfer-dom>
        <popup v-model="isShowReturn">
          <div class="popup0" style="padding:1rem;background: #fff;border-top:1px #f1f1f1 solid;">
            <check-icon :value.sync="returnGoods[0]" type="plain" @click.native="changeReturn(0)">待处理</check-icon>
            <check-icon :value.sync="returnGoods[1]" type="plain" @click.native="changeReturn(1)">通过</check-icon>
            <check-icon :value.sync="returnGoods[2]" type="plain" @click.native="changeReturn(2)">不通过</check-icon>
            <div style="padding:0.5rem;border:1px #f1f1f1 solid;border-radius: 5px;margin-top: 1rem;">
              <x-textarea :max="30" v-model="handleDetail" placeholder="请输入不通过理由" style="line-height: 25px;"></x-textarea>
            </div>
            <div style="text-align: right;">
              <x-button style="background: #ffc655;color: #fff;" mini @click.native="isShowReturn=false">取消</x-button>
              <x-button style="background: #33bb99;color: #fff;" mini @click.native="confirmBackOrder">确定</x-button>
            </div>
          </div>
        </popup>
      </div>
      <!--支付-->
      <div v-transfer-dom>
        <popup v-model="payState">
          <div class="popup0" style="padding:1rem;background: #fff;border-top:1px #f1f1f1 solid;">
            <div class="pay-type">
              <span>支付方式</span>
              <div>
                <checker class="checker" v-model="payType" default-item-class="demo5-item" selected-item-class="demo5-item-selected" >
                  <checker-item v-for="(item,index) in payTypeList" :key="index" :value="item">{{item.pay_type}}</checker-item>
                </checker>
              </div>
            </div>
            <div class="pay-type">
              <span>金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</span>
              <div>
                <input type="text" placeholder="请输入金额" v-model="money">
              </div>
            </div>
            <div class="pay-type">
              <span>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</span>
              <div>
                <x-textarea v-model="remarkText" :max="30" placeholder="请填写备注" class="remark-text"></x-textarea>
              </div>
            </div>
            <div style="text-align: right;border-top: 1px #f1f1f1 solid;margin-top: 1rem;">
              <x-button style="background: #ffc655;color: #fff;" mini @click.native="payState=false">取消</x-button>
              <x-button style="background: #33bb99;color: #fff;" mini @click.native="payOrder">确定</x-button>
            </div>
          </div>
        </popup>
      </div>
      <br><br><br><br><br>
    </div>
</template>

<script>
  import { FormPreview, XTable, Checker, CheckerItem, Checklist, XTextarea, Popup, Drawer } from 'vux'
  import detailUpdate from './Detail-update'
  import detailAddress from './Address'
  export default {
    name: "",
    components:{
      FormPreview, XTable, Checker, CheckerItem, Checklist, XTextarea, Popup, detailUpdate, detailAddress, Drawer
    },
    props:['detail'],
    created(){
      console.log(this.detail)
      this.getP()
      this.getOrderDetail()
      this.changeReturn(0)
      this.getPayType()
    },
    data () {
      return {
        show:false,
        returnGoodsNum:-1,
        returnGoods:[false,false,false],
        orderId:'',
        order:[],
        returnShow: false, // 是否退货
        returnRemark: '', // 退货备注
        isAddress:false,
        isShowReturn:false,
        handleDetail:'',
        type: 0,
        payState:false,
        payType:'',
        payTypeList:[],
        money:'',
        remarkText:'',
        isShowUpdate:false,
        showAddress:false,
        isShow:true,
        signature:false,
      }
    },
    methods:{
      // 修改收货地址
      editAddress(){
        this.showAddress = true
        this.orderDetail = this.detail
      },
      // 修改订单详情
      editDetail(v){
        this.isShowUpdate = true
        this.goodsDetail = v
        this.orderId = this.detail.id
      },
      // 获取支付方式
      getPayType(){
        this.$vux.loading.show();
        this.config0.post('/supply/appOrder/findPayType', {}).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.payTypeList = res.data.orderPayTypeList
          }else{
            this.msg(this.config0.handleError(res.data));
          }
        })
      },
      payVerify(){
        if(this.payType==''){
          this.msg('请选择支付方式');
          return false
        }
        if(this.money==''){
          this.msg('请填写支付金额');
          return false
        }else{
          let reg = /^\d+(\.\d+)?$/
          if (!reg.test(this.money)){
            this.msg('支付金额必须为数字');
            return false;
          }
        }
        if(this.remarkText==''){
          this.msg('请填写备注');
          return false
        }
        return true
      },
      // 支付
      payOrder(){
        if(!this.payVerify()) return false;
        this.$vux.loading.show();
        let arr = []
        let obj = {
          "order_id":this.detail.id,
          "pay_type_id":this.payType.id,
          "pay_type_code":this.payType.pay_code,
          "money":this.money,
          "remark":this.remarkText
        }
        arr.push(obj)
        this.config0.post('/supply/appOrder/payForOrder', {payJson:JSON.stringify(arr)}).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.msg(res.data.message);
            this.$emit('toOrder',true);
          }else{
            this.msg(this.config0.handleError(res.data));
          }
        })
      },
      // 处理退货
      changeReturn(index){
        this.returnGoods = [false,false,false]
        this.returnGoods[index] = this.returnGoodsNum == index?false:true
        this.returnGoodsNum = index
      },
      // 发货
      shipmentsOrder(){
        let self = this;
        this.$vux.confirm.show({
          title: '发货',
          content: '确认发货？',
          onConfirm () {
            self.$vux.loading.show();
            self.config0.post('/supply/appOrder/sendGoods', {
              orderId: self.detail.id,
            }).then(res=>{
              self.$vux.loading.hide();
              if(res.data.code==='0'){
                self.msg(res.data.message);
                self.$emit('toOrder',true);
              }else{
                self.msg(self.config0.handleError(res.data));
              }
            })
          }
        });
      },
      // 处理退货请求
      confirmBackOrder(){
        if(this.returnGoodsNum==2){
          if(this.handleDetail=='') this.msg('请输入不通过理由！');
          return
        }
        let url = this.type==0?'/supply/appOrder/handleOrderBackApply':'/supply/appOrder/handleOrderCancelApply'
        let obj = this.type==0?{
            orderId:this.detail.id,
            state:this.returnGoodsNum,
            disagreenReason:this.handleDetail
        }:{
          orderId:this.detail.id,
          isPass:this.returnGoodsNum,
          disagreenReason:this.handleDetail
        }
        this.$vux.loading.show();
        this.config0.post(url, obj).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.msg(res.data.message);
            this.$emit('toOrder',true);
          }else{
            this.msg(this.config0.handleError(res.data));
          }
        })
      },
      // 拒绝接单
      disconfirmOrder(){
        let self = this;
        this.$vux.confirm.show({
          title: '拒绝接单',
          content: '确认拒绝接单？',
          onConfirm () {
            self.$vux.loading.show();
            self.config0.post('/supply/appOrder/disConfirmOrder', {
              orderId: self.detail.id,
            }).then(res=>{
              self.$vux.loading.hide();
              if(res.data.code==='0'){
                self.msg(res.data.message);
                self.$emit('toOrder',true);
              }else{
                self.msg(self.config0.handleError(res.data));
              }
            })
          }
        });
      },
      // 确认订单
      confirmOrder(){
        this.$vux.loading.show();
        this.config0.post('/supply/appOrder/confirmOrder', {
          orderId:this.detail.id,
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.msg(res.data.message);
            this.$emit('toOrder',true);
          }else{
            this.msg(this.config0.handleError(res.data));
          }
        })
      },
      // 查看订单操作记录
      viewOrderRecord(){

      },
      // 获取订单详情
      getOrderDetail(){
        this.$vux.loading.show();
        this.config0.get('/supply/appOrder/findDetail', {
          orderId:this.detail.id,
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            $.each(res.data.list,(index,item)=>{
              item.norm = JSON.parse(item.norm)
            })
            this.order = res.data.list
            this.show = true
          }else{
            this.msg(this.config0.handleError(res.data));
          }
        })
      },
      // 信息提示
      msg(str){
        this.$vux.toast.show({
          type: 'text',
          text: str,
          position: 'default',
          time: 800,
        });
      },
      // 返回
      back(){
        this.$emit('toOrder',false);
      },
      back3(msg){
        this.isShowUpdate=false
        this.showAddress = false
        if(msg) this.$emit('toOrder',true);
      },
      getP(){
        this.$vux.loading.show();
        this.config0.post('/common/address/getProvinces', {id:this.detail.provinces_id}).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.detail.prov = res.data.obj.province
            this.getC()
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      getC(){
        this.$vux.loading.show();
        this.config0.post('/common/address/getCitis', {
          id: this.detail.cities_id,
          provinceid: this.detail.provinces_id,
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.detail.city = res.data.obj.city
            this.getA()
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      getA(){
        this.$vux.loading.show();
        this.config0.post('/common/address/getAreas', {
          id: this.detail.areas_id,
          cityid: this.detail.cities_id
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.detail.area = res.data.obj.area
            this.isAddress = true
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
    },

    filters: {
      statusFilter(value){
        let str = '';
        if(value==='0'){
          str = '待确认';
        }
        if(value==='1'){
          str = '待发货';
        }
        if(value==='2'){
          str = '已发货';
        }
        if(value==='3'){
          str = '已签收';
        }
        if(value==='4'){
          str = '退货中';
        }
        if(value==='5'){
          str = '已退货';
        }
        if(value==='6'){
          str = '取消交易中';
        }
        if(value==='7'){
          str = '已取消';
        }
        if(value==='8'){
          str = '退货待确认';
        }
        return str;
      },
    }
  }
</script>

<style scoped lang="less">
@import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
.vux-drawer{
  position: absolute;
  z-index: 1;
}
.signature-img{
  width: 100%;
  height:150px;
  border:1px #fff solid;
  text-align: center;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 6px #ccc;
  margin-top: 10px;
  img{
    height:100%;
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg); 	/* IE 9 */
    -moz-transform:rotate(-90deg); 	/* Firefox */
    -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
    -o-transform:rotate(-90deg);	/* Opera */
  }
}
.signature{
  line-height: 35px;
  width: 100%;
  border-radius: 5px;
  margin-top: 10px;
  text-align:center;
  color: #fff;
  background: -webkit-radial-gradient(#10aeff, #9edcfc); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(#10aeff, #9edcfc); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(#10aeff, #9edcfc); /* Firefox 3.6 - 15 */
  background: radial-gradient(#10aeff, #9edcfc); /* 标准的语法 */
}
.pay-type{
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
  span{
    color: #999;
    width: 22%;
  }
  div{
    width: 78%;
    .checker{
      display: flex;
      justify-content: space-between;
    }
    .remark-text{
      padding:0.5rem;border-radius: 5px;line-height: 1.8rem;border:1px #f1f1f1 solid;
    }
    input{
      outline: none;
      line-height: 1.8rem;
      border:0;
      border:1px #f1f1f1 solid;
      padding: 0 0.5rem;
      border-radius: 5px;
    }
  }
}
.demo2-item {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
}
.demo2-item-selected {
  border-color: green;
}
.demo5-item {
  width: 100px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin-right: 6px;
}
.demo5-item-selected {
  background: #ffffff url(../../../assets/images/bg.png) no-repeat right bottom;
  border-color: #ff4a00;
}
.event-btn{
  padding:0.5rem;
  border-top:1px solid #33bb99;
  text-align: right;
}
.flex-demo{
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 8px #bbbbbd;
  margin-top: 0.3rem;
  font-size:0.8rem;
.title{
  display: flex;
  justify-content: space-between;
  padding:0.5rem 0.5rem;
  line-height:1.5rem;
  border-bottom:1px #33bb99 solid;
  .title-btn{
    background: #33bb99;
    color: #fff;
    padding:0 0.5rem;
    line-height: 1.5rem;
    border-radius: 5px;
  }
span{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
.iconfont{
  color:#33bb99;
  font-weight: normal;
  font-size:1rem;
  padding-right:0.3rem;
}
}
span.time{
  color: #999;
  font-size: 0.6rem;
  font-weight:normal;
}
span.log-btn{
  background: #33bb99;
  color: #fff;
  padding:0 0.5rem;
  border-radius: 5px;
}
}
.order-text{
  padding:0.5rem;
  line-height:1.5rem;
  font-size:0.8rem;
  color:#333;
  .text{
    border-bottom: 1px dashed #f1f1f1;
    padding:0.5rem 0.5rem 0;
    display: flex;
    justify-content: space-between;
  }
  .all{
    border-bottom: 1px solid #f1f1f1;
  }
h5{
  font-size:0.9rem;
}
.order-state{
  color:#ff0000;
i{
  color:#33bb99;
  padding-right:0.2rem;
  font-size:1rem;
}
}
p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;

    .iconfont{
      color:#33bb99;
      padding-right:0.2rem;
      font-size:1rem;
    }
  }
  .pay{
    display: flex;
    justify-content: space-between;
    .price{
      font-weight: 700;
      color:#ff0000;
      .iconfont{
        color:#33bb99;
        padding-right:0.2rem;
        font-size:1rem;
        font-weight: normal;
      }
      span{
        font-size:1.2rem;
      }
    }
    .btn{
      color: #fff;
      span{
        margin-left: 0.5rem;
        background: #ffc655;
        display: inline-block;
        line-height:1.5rem;
        padding:0 0.5rem;
        border-radius: 5px;
      }
    }
  }
}
.update-address{
  display: flex;
  justify-content: space-between;
  i{
    width: 5%;
    display: inline-block;
  }
  span{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    width: 90%;
  }
}
}

.confirm{
  background: #33bb99;
  color: #fff;
  padding:0 0.5rem;
  border-radius: 5px;
  line-height:1.5rem;
  display: inline-block;
}
.remark{
  width:100%;
  margin:0.7rem 0 1.3rem;
  border:1px #e1e1e1 solid;
  border-radius: 5px;
span{
  padding:0.5rem;
  display: inline-block;
  min-height:20px;
  line-height:1.5rem;
}
}
</style>
